<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.5.3/dist/vue-router.js"></script>
</head>

<body>
<div id="app">
  <router-view></router-view>
</div>

<script>
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: {
       template: '<div>index</div>'
      }
    },
    {
      path: '/bar',
      component: {
        template: '<div>bar</div>'
        }
    }
  ]
})

router.beforeEach((to, from , next) => {
  next()
})

router.afterEach(() => {
  alert('router.afterEach')
})

new Vue({
  router,
  el: '#app',
  data: {
    bar: true
  }
})
</script>
</body>
</html>
